<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>阿里百秀-发现生活，发现美!</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/vendors/nprogress/nprogress.css">
</head>

<body>
    <div class="wrapper">
        <div class="topnav">
            <ul id="topNavBox">

            </ul>
        </div>
        <div class="header">
            <h1 class="logo">
                <a href="index.html"><img src="assets/img/logo.png" alt=""></a>
            </h1>
            <ul class="nav" id="navBox">

            </ul>
            <div class="search">
                <form>
                    <input type="text" class="keys" placeholder="输入关键字">
                    <input type="submit" class="btn" value="搜索">
                </form>
            </div>
        </div>
        <div class="aside">
            <div class="widgets">
                <h4>搜索</h4>
                <div class="body search">
                    <form>
                        <input type="text" class="keys" placeholder="输入关键字">
                        <input type="submit" class="btn" value="搜索">
                    </form>
                </div>
            </div>
            <div class="widgets">
                <h4>随机推荐</h4>
                <ul class="body random" id="randomBox">

                </ul>
            </div>
            <div class="widgets">
                <h4>最新评论</h4>
                <ul class="body discuz" id="commentBox">

                </ul>
            </div>
        </div>
        <div class="content">
            <div class="article" id="article"></div>

            <div id="comment">

            </div>
            <div class="panel hots">
                <h3>热门推荐</h3>
                <ul id="recommendBox">

                </ul>
            </div>
        </div>
        <div class="footer">
            <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
        </div>
    </div>
    <script src="assets/vendors/jquery/jquery.js"></script>
    <script src="assets/vendors/nprogress/nprogress.js"></script>
    <script src="assets/vendors/art-template/template-web.js"></script>
    <!-- 文章详情模板 -->
    <script type="text/html" id="postTpl">
        <div class="breadcrumb">
            <dl>
                <dt>当前位置：</dt>
                <dd><a href="javascript:;">{{category.title}}</a></dd>
                <dd>{{title}}</dd>
            </dl>
        </div>
        <h2 class="title">
            <a href="javascript:;">{{title}}</a>
        </h2>
        <div class="meta">
            <span>{{author.nickName}} 发布于 {{createAt}}</span>
            <span>分类: <a href="javascript:;">{{category.title}}</a></span>
            <span>阅读: ({{meta.views}})</span>
            <span>评论: ({{meta.comments}})</span>
            <a href="javascript:;" id="like">赞</a>
        </div>
        {{content}}
    </script>
    <!-- 评论模板 -->
    <script type="text/html" id="commentTpl">
        <style type="text/css">
            .comment {
                margin-bottom: 20px;
            }
            
            .comment textarea {
                box-sizing: border-box;
                padding: 10px;
                width: 100%;
                height: 80px;
                display: block;
            }
            
            .comment input {
                width: 100px;
                height: 30px;
                margin-top: 10px;
            }
        </style>
        <div class="comment">
            <form>
                <textarea></textarea>
                <input type="submit" value="提交评论">
            </form>
        </div>
    </script>
    <script src="assets/js/public.js"></script>
    <script src="assets/js/recommend.js"></script>
    <script src="assets/js/detail.js"></script>
</body>

</html>